import React, { memo, useEffect } from 'react'
import { HomeWrapper } from './style'
import HomeBanner from './home-banner'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { getGoodPriceInfoActionAsync, getHighScoreActionAsync } from '@/store/modules/home'
import HomeSection from './home-section'

const Home = memo(() => {
  // 获取数据
  const goodPriceInfo = useSelector((state) => state.home.goodPriceInfo, shallowEqual)
  const highscore = useSelector((state) => state.home.highscore, shallowEqual)

  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getGoodPriceInfoActionAsync())
    dispatch(getHighScoreActionAsync())
  }, [])

  return (
    <HomeWrapper>
      <HomeBanner />
      <div className='content'>
        <HomeSection data={goodPriceInfo}></HomeSection>
        <HomeSection data={highscore}></HomeSection>
      </div>
    </HomeWrapper>
  )
})

export default Home